<template>
  <div class="lingquanzhuanlan" v-if="(module.modules && module.modules.length) || list.length">
    <div class="container-column">
      <div>
        <div class="featurelist">
          <div
            v-for="(item, index) in module.modules"
            :key="index"
            class="feature-item"
            @click="setActiveIndex(index)"
          >
            <div
              class="title"
              :class="index === activeIndex ? 'titleActive' : 'title'"
            >
              {{ item.title }}
            </div>
            <div class="titlep">{{ item.subTitle }}</div>
            <div
              :class="index === activeIndex ? 'point' : ' '"
              :style="{
                width: item.width,
                background: index === activeIndex ? '#FFB72F' : '',
              }"
            ></div>
          </div>
        </div>
      </div>

      <div>
        <div class="coupon-list">
          <div
            class="coupon-list-item"
            v-for="item in list"
            :key="item.detail.availableTime.couponId"
          >
            <img
              class="coupon-bg"
              :src="require('@/assets/icon/pic_lingqu.png')"
              style="width:353px; height:114px;"
            >
            <div class="coupon-content flex-x-between">
              <div>
                <div class="store-msg">
                  <!-- <div wx:if="{{true}}" class="flex-x-0-center" style="padding:22rpx 0px 27rpx 0px"> -->
                  <div
                    v-if="
                      item.detail.prototype.logo &&
                      item.detail.prototype.belongMerchantName
                    "
                    class="flex-x-0-center"
                    style="padding: 11px 0px 13px 0px"
                  >
                    <img
                      :src="fileBaseUrl + item.detail.prototype.logo"
                      class="store-img"
                      style="width: 23px; height: 23px"
                    />
                    <div class="store-name">
                      {{ item.belongMerchantName }}54544
                    </div>
                  </div>
                  <div
                    v-else
                    style="padding: 15px 0px 20px 0px"
                    class="show-coupon-type"
                  >
                    <div v-if="item.detail.prototype.couponType == 'exchange'"
                      >兑换券</div
                    >
                    <div
                      v-else-if="
                        item.detail.prototype.couponType == 'cash' ||
                        item.detail.prototype.couponType == 'cash_wx_busi' ||
                        item.detail.prototype.couponType == 'cash_wx_pay'
                      "
                    >
                      代金券
                    </div>
                    <div
                      v-else-if="
                        item.detail.prototype.couponType == 'discount' ||
                        item.detail.prototype.couponType == 'discount_wx_busi'
                      "
                    >
                      折扣券
                    </div>
                  </div>
                </div>
                <div class="coupon-name">
                  {{ item.detail.prototype.couponName }}
                </div>
                <div class="over-time">
                  领取后 {{ item.detail.prototype.endTime }} 过期
                </div>
              </div>
              <div class="coupon-denomination flex-y-center">
                <div class="denomination flex-x-0-center">
                  <div
                    class="price-val"
                    v-if="
                      item.detail.prototype.couponType != 'discount' &&
                      item.detail.prototype.couponType != 'discount_wx_busi'
                    "
                  >
                    ￥
                  </div>
                  <div
                    class="flex-x-0-center"
                    style="align-items: flex-end"
                    v-if="
                      item.detail.prototype.couponType == 'discount' ||
                      item.detail.prototype.couponType == 'discount_wx_busi'
                    "
                  >
                    <div class="price">
                      {{ myFied(item.detail.prototype.discountPercent) }}
                    </div>
                    <div
                      class="price-val"
                      style="margin-bottom: 4rpx; margin-left: 4rpx"
                    >
                      折
                    </div>
                  </div>
                  <div class="price" v-else>
                    {{ item.detail.prototype.denomination / 100 }}
                  </div>
                </div>
                <div
                  v-if="item.detail.prototype.transactionMinimum / 100 === 0"
                  class="threshold"
                >
                  无门槛
                </div>
                <div v-else class="threshold">
                  满{{ item.detail.prototype.transactionMinimum / 100 }}可用
                </div>
                <div class="flex-x-center-center now-get">立即领取</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ModuleNotConfig :module="module" v-else />
</template>

<script>
import { getCardCouponByIds } from "@/views/cardsAndOffer/api/coupon";
export default {
  props: {
    module: {
      type: Object,
    },
    fileBaseUrl: {
      type: String,
    },
  },
  data() {
    return {
      activeIndex: 0,
      list: [],
    };
  },
  watch: {
    module: {
      handler() {
        this.getFetchData()
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getFetchData()
  },
  methods: {
    getFetchData() {
      if (!this.module.modules) return;
      if (this.module.modules?.length) {
      const ids = this.module.modules[this.activeIndex].biz.params.couponIds;
      this.getCardCouponByIds(ids);
      this.handleFeatureList()
    } else {
      this.list = [];
    }
    },
    getCardCouponByIds(ids) {
      getCardCouponByIds({ prototypeId: ids }).then((res) => {
        this.list = res.data || [];
      });
    },
    setActiveIndex(index) {
      if (index === this.activeIndex) return;
      this.activeIndex = index;
      this.getFetchData()
    },
    myFied(discountPercent) {
      var num = (discountPercent / 10).toFixed(1);
      return num;
    },
    //feature宽度适配
    handleFeatureList() {
      let featureList = this.module.modules;
      featureList.forEach((item) => {
        if (item.title) {
          let len = item.title.length;
          if (len == 4) {
            item.width = "75px";
          } else if (len == 3) {
            item.width = "50px";
          } else if (len == 2) {
            item.width = "42.5px";
          } else {
            item.width = "50px";
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-x-0-center {
    display: flex;
    align-items: center;
  }
.featurelist {
  display: flex;
  flex-wrap: nowrap;
  padding: 16px 0px;
  width: 100%;
  align-items: center;
  padding-left: 13px;
  background: #f6f6f6;
  .flex-x-0-center {
    display: flex;
    align-items: center;
  }
  .feature-item {
    flex-shrink: 0;
    font-family: PingFang SC;
    font-weight: 400;
    color: #353535;
    text-align: center;
    margin: 0 16px;
    padding: 0px 5px;
    position: relative;
    .title {
      padding: 0px 5px;
    }
    .titleActive {
      font-size: 16px;
      font-weight: bold;
    }
    .point {
      background-color: #03c1b6;
      opacity: 0.5;
      width: 42px;
      height: 8px;
      position: absolute;
      left: 50%;
      top: 32%;
      transform: translateX(-50%);
      z-index: 1;
      border-bottom-right-radius: 5px;
      border-top-left-radius: 5px;
    }
    .titlep {
      font-size: 12px;
      color: #888888;
      margin-top: 6px;
    }
    .title {
      font-size: 15px;

      z-index: 5;
      font-family: PingFang SC;
      position: relative;
    }
  }
}
.container-column {
  background-color: #f9f9f9;
  padding-bottom: 15px;
}

.coupon-list {
  padding: 15px 10rpx 0px;
  .coupon-list-item {
    position: relative;
    height: 114px;
    margin-bottom: 13px;

    .coupon-content {
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      padding-left: 16px;
      .coupon-name {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        margin-bottom: 13px;
      }
      .store-img {
        border-radius: 50%;
        margin-right: 7px;
      }
      .store-name {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
      }
      .over-time {
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
      }
      .coupon-denomination {
        width: 130px;
        padding: 14px 0px 13px 0px;
      }
      .price-val {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
      .price {
        font-size: 28px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #ffffff;
      }
      .threshold {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin: 7px 0px 11px 0px;
      }
      .now-get {
        width: 100px;
        height: 26px;
        background: #ffffff;
        border-radius: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #e75457;
      }
      .now-use {
        border: 1px solid #e75457;
        background-color: #f9e3e3;
        color: #e75457;
      }
      .show-coupon-type {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
      }
      .is-get {
        color: #e75457;
      }
    }
    .coupon-bg {
      position: absolute;
      z-index: 1;
    }
  }
}
</style>